<!DOCTYPE html>
<html lang="en">
<head>
    {{template "macro_head_script" .}}
</head>
<body>
{{template "macro_header"}}

<div class="container" id="container">
	<div class="row" id="content">
		<div class="form-group col-md-12">
			<label>技能名称：</label>
			<input type="text" class="form-control" v-model="skillName">
		</div>
		<div class="form-group col-md-12">
			<label>技能类型：</label>
			<select class="form-control" v-model="skillType">
				<option v-for="item in skillTypeTable" v-bind:value="item.id">${item.name}$</option>
			</select>
		</div>
		<div class="form-group col-md-12">
			<button class="btn btn-info" v-on:click="fastCreate">快速创建</button>
		</div>
		<div class="col-md-12 table-responsive">
			<table class="table">
				<thead>
				<tr>
					<th class="col-md-1">#</th>
					<th class="col-md-6">宏文本</th>
					<th class="">描述信息</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="item1 in skillTable">
					<th scope="row">${item1.id}$</th>
					<td v-html="item1.text"></td>
					<td v-html="item1.desc"></td>
				</tr>
				<tr v-for="item2 in skillTableOfRemote">
					<th scope="row">${item2.id}$</th>
					<td>
						<pre>${item2.text}$</pre>
					</td>
					<td>${item2.desc}$</td>
				</tr>
				</tbody>
			</table>
		</div>
	</div>
    {{template "common_footer"}}
</div>
<script>
	function toggle() {
		var flag = document.getElementById("navbar-collapse-1").style.display;
		if (flag === "block") {
			document.getElementById("navbar-collapse-1").style.display = "none";
		} else {
			document.getElementById("navbar-collapse-1").style.display = "block";
		}
	}

	var vue = new Vue({
		el: "#container",
		delimiters: ['${', '}$'],
		data: {
			skillTypeTable: [
				{
					"id": 0,
					"name": "请选择技能类型",
				},
				{
					"id": 1,
					"name": "伤害技能(单体)",
				},
				{
					"id": 2,
					"name": "治疗技能(单体)",
				},
				{
					"id": 3,
					"name": "范围(伤害/治疗)技能",
				},
				{
					"id": 4,
					"name": "增益技能",
				},

			],
			skillName: "",
			skillType: "0",
			skillCondition: {
				"0": [],
				"1": [
					[
						{
							"condition": "[@mouseover,harm]",
							"desc": "鼠标指向的目标是敌对目标",
						},
						{
							"condition": "[@target,harm]",
							"desc": "当前目标是敌对目标",
						},
						{
							"condition": "",
							"desc": "直接施放"
						},
					],
				],
				"2": [
					[
						{
							"condition": "[@mouseover,help]",
							"desc": "鼠标指向的目标是友善目标",
						},
						{
							"condition": "[@target,help]",
							"desc": "当前目标是友善目标",
						},
						{
							"condition": "[@player]",
							"desc": "以玩家自己为目标",
						},
						{
							"condition": "",
							"desc": "直接施放"
						}
					]
				],
				"3": [
					[
						{
							"condition": "[@cursor]",
							"desc": "鼠标当前位置",
						},
						{
							"condition": "",
							"desc": "直接施放"
						}
					],
					[
						{
							"condition": "[@player]",
							"desc": "玩家当前位置",
						},
						{
							"condition": "",
							"desc": "直接施放"
						}
					]
				],
				"4": [
					[
						{
							"condition": "",
							"desc": "直接施放"
						}
					],
				]
			},
			skillTable: [],
			skillTableOfRemote: [],
		},
		methods: {
			fastCreate: function() {
				console.log(vue.$data.skillType);
				if (vue.$data.skillType !== "0" && vue.$data !== 0) {
					vue.$data.skillName = vue.$data.skillName.replace(/(^\s*)|(\s*$)/g, "");
					vue.$data.skillTable = [];//清空
					vue.$data.skillTableOfRemote = [];
					var num = 1;

					var skills = vue.$data.skillCondition[vue.$data.skillType];

					var len = skills.length;
					for (var i = 0; i < len; i++) {
						var text = desc = "";
						var lenL = skills[i].length;
						for (var j = 0; j < lenL; j++) {
							text += "<br>/cast " + skills[i][j].condition + vue.$data.skillName;
							if (skills[i][j].condition !== "") {

								desc += "<br>- 【" + skills[i][j].desc + "】则施放【" + vue.$data.skillName +
									"】，否则跳过";
							} else {
								desc += "<br>- " + skills[i][j].desc + "【" + vue.$data.skillName + "】";

							}
						}
						vue.$data.skillTable.push({
							"id": num,
							"text": "#showtooltip" + text,
							"desc": "- 【显示技能图标和技能描述】" + desc,
						});
						num++;
					}
					axios.get('/macro/preCreate', {
						params: {
							macro: vue.$data.skillName,
						}
					})
						.then(function(response) {
							var len = response.data.data.length;
							// console.log(len);
							for (var i = 0; i < len; i++) {
								vue.$data.skillTableOfRemote.push({
									"id": num,
									"text": response.data.data[i].macro,
									"desc": response.data.data[i].title,
								});
								num++;
							}
						});
				} else {
					alert("请选择技能类型")
				}
			}
		}
	});
</script>
</body>
</html>